<template>
	<view class="container">
		<view class="matchmaker-header" style="background-image: url(/static/images/matchmaker/background-header-apply.png);">
			<!--  -->
			<view class="matchmaker-header-text">申 请 红 娘</view>
			<view class="matchmaker-header-division">
				<view class="matchmaker-header-division-line"></view>
				<view class="matchmaker-header-division-dot"></view>
				<view class="matchmaker-header-division-line"></view>
			</view>
		</view>
		<view class="matchmaker-body">
			<u-form :model="formData" ref="uForm" label-width="170rpx" :label-style="labelStyle">
				<u-form-item style="padding-top: 10rpx;" label="真实姓名："><u-input v-model="formData.realName" :disabled="true" /></u-form-item>
				<u-form-item style="padding-top: 10rpx;" label="性别："><u-input v-model="formData.sex" :disabled="true" /></u-form-item>
				<u-form-item style="padding-top: 10rpx;" label="身份证号："><u-input v-model="formData.idcard" :disabled="true" /></u-form-item>
				<u-form-item style="padding-top: 10rpx;" label="婚姻状况：" :border-bottom="false">
					<u-radio-group v-model="formData.marriage" size="25" icon-size="20" active-color="#F85962">
						<u-radio label-size="30" shape="square" v-for="(marriageRadio, index) in marriageRadioList" :key="index" :name="marriageRadio.name">
							<text class="marriage-text">{{ marriageRadio.label }}</text>
						</u-radio>
					</u-radio-group>
				</u-form-item>
			</u-form>
			<view class="matchmaker-code-title">短信验证码</view>
			<view class="matchmaker-code-chunk"><u-message-input :breathe="false" :font-size="40" @finish="finishMessageInput" inactive-color="#CECECE" active-color="#F85962" mode="bottomLine" :maxlength="6" :width="70"></u-message-input></view>
			<view class="matchmaker-code-btn" @tap.stop="sendCode">{{ matchmakerCodeText }}</view>
			<view class="matchmaker-submit" :class="{ disable: !checkedNeed || verify.length != 6 }" @tap.stop="submitForm">提交</view>
		</view>
		<view class="matchmaker-need">
			<image @tap.stop="checkedNeed = !checkedNeed" src="@/static/images/matchmaker/matchmaker-need-normal.png" v-if="!checkedNeed" mode="aspectFit"></image>
			<image @tap.stop="checkedNeed = !checkedNeed" src="@/static/images/matchmaker/matchmaker-need-checked.png" v-else mode="aspectFit"></image>
			点击按钮即表示同意
			<text class="title" @tap.stop="agreementShow=true">《红娘协议》</text>
		</view>
		<view v-if="agreementShow" class="agreement-popup">
			<view class="agreement-popup-content">
				<view class="agreement-popup-container">
					<scroll-view style="height:475rpx ;"><u-parse :html="agreementText" :autosetTitle="false" :lazy-load="true"></u-parse></scroll-view>
					<view class="agreement-popup-btn" @tap.stop="agreementShow=false">我已阅读《红娘协议》</view>
				</view>
				<image class="agreement-popup-bottom" src="@/static/images/matchmaker/bottom-matchmaker-agreement.png" mode=""></image>
			</view>
		</view>
		<u-verification-code :keep-running="true" unique-key="smsApplyMathmaker" :seconds="60" end-text="重新获取验证码" ref="sendCode" @change="codeChange"></u-verification-code>
	</view>
</template>

<script>
import Tools from '@/utils/Tools.js';
export default {
	data() {
		return {
			formData: {
				realName: '',
				sex: '',
				idcard: '',
				marriage: ''
			},
			labelStyle: {
				fontSize: '28rpx',
				fontWeight: 400
			},
			verify: '',
			marriageRadioList: {},
			matchmakerCodeText: '',
			checkedNeed: true,
			agreementText: '',
			agreementShow: false,
			popueStyle: {
				background: 'rgba(0,0,0,0)'
			}
		};
	},
	onLoad() {
		this.refreshUserInfo();
		this.getCupidInfo();
		this.$u.api.getAgreementData('MATCHMAKER_AGREEMENT').then(res => {
			this.agreementText = res.data.detail.article_content;
		});
		// this.formData = {
		// 	realName:this.userInfo.
		// }
	},
	methods: {
		getCupidInfo() {
			this.$u.api.getCupidInfo().then(res => {
				if (res.data) {
					const info = res.data.info;
					const marriage = res.data.marriage;
					const marriageRadioList = [];
					for (let key in marriage) {
						marriageRadioList.push({ name: key, label: marriage[key] });
					}
					this.marriageRadioList = marriageRadioList;
					this.formData = {
						realName: info.real_name,
						sex: info.gender,
						idcard: info.idcard,
						marriage: info.marriage || 10
					};
				}
			});
		},
		finishMessageInput(verify) {
			this.verify = verify;
		},
		codeChange(text) {
			this.matchmakerCodeText = text;
		},
		sendCode() {
			if (this.$refs.sendCode.canGetCode) {
				this.$u.api
					.sendSmsCode(this.userInfo.mobile, 'login')
					.then(res => {
						// 通知验证码组件内部开始倒计时
						this.$refs.sendCode.start();
						this.$u.toast('验证码已发送');
					})
					.catch(e => {
						uni.showToast({
							icon: 'none',
							title: e.data.msg
						});
					});
			}
		},
		submitForm() {
			if (this.formData.marriage && this.verify.length == 6) {
				this.$u.api.submitCupidApply({ verify: this.verify, marriage: this.formData.marriage }).then(res => {
					Tools.showSuccess('申请已提交', () => {
						this.$u.api.setFirstIdentity(20).then(res => {
							this.refreshUserInfo();
						});
					});
				});
			}
		}
	}
};
</script>

<style lang="scss">
page {
	background-color: #fff;
}
.matchmaker-header {
	/* #ifndef MP */
	height: calc(192rpx + var(--status-bar-height) + 44px);
	padding-top: calc(var(--status-bar-height) + 44px);
	/* #endif */
	/* #ifdef MP */
	height: 222rpx;
	padding-top: 30rpx;
	/* #endif */
	position: relative;
	background-position: bottom center;
	background-size: cover;
	display: flex;
	flex-direction: column;
	align-items: center;
	.matchmaker-header-text {
		height: 50rpx;
		font-size: 36rpx;
		color: rgba(255, 255, 255, 1);
		line-height: 50rpx;
	}
	.matchmaker-header-division {
		height: 3rpx;
		display: flex;
		margin-top: 18rpx;
		.matchmaker-header-division-line {
			width: 110rpx;
			height: 3rpx;
			background: rgba(255, 255, 255, 1);
			border-radius: 3rpx;
		}
		.matchmaker-header-division-dot {
			margin: 0 38rpx;
			width: 6rpx;
			height: 6rpx;
			background: rgba(255, 255, 255, 1);
		}
	}
}
.matchmaker-body {
	padding: 45rpx 100rpx 20rpx;
	.marriage-text {
		height: 30rpx;
		font-size: 26rpx;
		font-weight: 300;
		color: rgba(151, 151, 151, 1);
		line-height: 30rpx;
	}
	.matchmaker-code-title {
		margin-top: 30rpx;
		height: 45rpx;
		font-size: 32rpx;
		font-weight: 400;
		color: rgba(0, 0, 0, 1);
		line-height: 45rpx;
	}
	.matchmaker-code-chunk {
		margin-top: 10rpx;
		width: 100%;
	}
	.matchmaker-code-btn {
		height: 35rpx;
		font-size: 24rpx;
		font-weight: 500;
		color: rgba(254, 182, 80, 1);
		line-height: 35rpx;
		margin-top: 20rpx;
	}
	.matchmaker-submit {
		width: 400rpx;
		height: 80rpx;
		background: linear-gradient(180deg, rgba(237, 79, 93, 1) 0%, rgba(251, 122, 142, 1) 100%);
		border-radius: 40rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		color: #fff;
		font-size: 32rpx;
		font-weight: 500;
		color: rgba(255, 255, 255, 1);
		margin: 100rpx auto 0;
		&.disable {
			opacity: 0.5;
		}
	}
}
.agreement-popup {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 10073;
	background-color: rgba(0, 0, 0, 0.6);
	display: flex;
	justify-content: center;
	align-items: center;
	.agreement-popup-content {
		width: 660rpx;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;

		.agreement-popup-bottom {
			width: 660rpx;
			height: 263rpx;
		}
		.agreement-popup-container {
			width: 585rpx;
			height: 700rpx;
			margin-bottom: -100rpx;
			background: rgba(255, 255, 255, 1);
			box-shadow: 0px 4rpx 10rpx 4rpx rgba(180, 180, 180, 0.5);
			border-radius: 50rpx;
			padding: 75rpx 30rpx 150rpx;
			position: relative;
			.agreement-popup-btn {
				width: 400rpx;
				height: 80rpx;
				background: linear-gradient(180deg, rgba(237, 79, 93, 1) 0%, rgba(251, 122, 142, 1) 100%);
				border-radius: 40rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				font-size: 32rpx;
				color: rgba(255, 255, 255, 1);
				position: absolute;
				z-index: 1000;
				left: 50%;
				margin-left: -200rpx;
				bottom: 50rpx;
			}
		}
	}
}
.matchmaker-need {
	height: 40rpx;
	font-size: 24rpx;
	font-weight: 400;
	color: rgba(109, 114, 120, 1);
	margin: 90rpx auto 0;
	display: flex;
	justify-content: center;
	align-items: center;
	.title {
		color: #f85962;
	}
	image {
		width: 36rpx;
		height: 36rpx;
		margin-right: 16rpx;
	}
}
</style>
